let imgs = ["./img/1.jpg", "./img/2.jpg", "./img/3.jpg", "./img/4.jpg","./img/5.jpg"];
let z = 999; //z-index的值
let index = 0; //显示第几张图片
var box = document.getElementById('box');

//l为行，t为列
function boom(l, t) {
    let oparentnode = document.createElement("div");
    oparentnode.style.zIndex = z;
    z--;
    box.appendChild(oparentnode);
    let x = l,
        y = t;
    for (let i = 0; i < y; i++) {
        for (let j = 0; j < x; j++) {
            var odiv = document.createElement("div");
            odiv.style.background = "url(" + imgs[index] + ") no-repeat";
            // odiv.style.backgroundSize ="100% 100%";
            odiv.style.width = box.clientWidth / x + "px";
            odiv.style.height = box.clientHeight / y + "px";
            odiv.style.left = (box.clientWidth / x) * j + "px";
            odiv.style.top = (box.clientHeight / y) * i + "px";
            odiv.style.backgroundPositionX = (box.clientWidth / x) * -j + "px";
            odiv.style.backgroundPositionY = (box.clientHeight / y) * -i + "px";
            odiv.style.transition = Math.random() * 1 + 0.5 + "s";
            oparentnode.appendChild(odiv);
        }
    }
    var alldiv = oparentnode.children;
    setTimeout(() => {
        index++;
        // index = imgs.length && (index = 0);
        if(index>=imgs.length){
            index = 0;
        }
        boom(l, t);
        for (var k = 0; k < alldiv.length; k++) {
            alldiv[k].style.transform =
                "perspective(800px) rotateX(" +
                (Math.random() * 500 - 250) +
                "deg) rotateY(" +
                (Math.random() * 500 - 250) +
                "deg) translateX(" +
                (Math.random() * 500 - 250) +
                "px) translateY(" +
                (Math.random() * 500 - 250) +
                "px)";
            alldiv[k].style.opacity = 0;
        }
    }, 2000);
    setTimeout(() => {
        oparentnode.remove();
    }, 3500);
}
boom(10, 10);